<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>

    <link rel="stylesheet" href="libs/layui/css/layui.css">
    <script src="libs/layui/layui.js"></script>

    <!-- <script src="js/public.js"></script> -->

</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="js/public.js"></script>
    <script src="js/main_count.js"></script>

    <!-- 折线图 -->
    <script>
        $.ajax({
            type: 'get',
            url: '/admin/data/article',
            data: {},
            success: (backData) => {
                // console.log(backData.date);
                // loadEchars(backData.date);
                // 方法一：forEach
                // let dates = []
                // let counts = []
                // backData.date.forEach(function(item) {
                //     dates.push(item.date)
                //     counts.push(item.count)
                // })
                // console.log(dates, counts);

                // 方法二
                let dates = backData.date.map(item => item.date)
                let counts = backData.date.map(item => item.count)
                loadEchars(dates, counts)
            },
        })

        // var json = '{"code":200,"msg":"获取成功","date":[{"date":"2019-05-20","count":23},{"date":"2019-05-21","count":19},{"date":"2019-05-22","count":29},{"date":"2019-05-23","count":24},{"date":"2019-05-24","count":28},{"date":"2019-05-25","count":28},{"date":"2019-05-26","count":19},{"date":"2019-05-27","count":25},{"date":"2019-05-28","count":25}]}';
        // var obj = JSON.parse(json);


        function loadEchars(dates, counts) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('curve_show'));

            // var data = [];
            // var date = [];
            // for (var i = 0; i < obj.date.length; i++) {
            //     data.push(obj.date[i].count);
            //     date.push(obj.date[i].date);
            // }

            option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function(pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        left: 'center',
                        text: '月新增文章数',
                    },

                    xAxis: {
                        name: '日',
                        type: 'category',
                        boundaryGap: false,
                        data: dates
                    },
                    legend: {
                        data: ['新增文章'],
                        top: '40'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                                readOnly: false
                            },
                            magicType: {
                                type: ['line', 'bar']
                            },
                            restore: {},
                            saveAsImage: {}
                        },
                        right: 50
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    series: [{
                        name: '新增文章',
                        type: 'line',
                        smooth: true,
                        // symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#f80'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(255,136,0,0.39)'
                            }, {
                                offset: .34,
                                color: 'rgba(255,180,0,0.25)'
                            }, {
                                offset: 1,
                                color: 'rgba(255,222,0,0.00)'
                            }])
                        },
                        data: counts
                    }],
                }
                // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>

    <!-- 环形图 -->
    <script>
        $.ajax({
            type: 'get',
            url: '/admin/data/category',
            data: {},
            success: (backData) => {
                // console.log(backData.date)

                let arr = []
                let obj = {}
                backData.date.map(function(item) {
                        obj = {
                            value: item.articles,
                            name: item.name
                        }
                        arr.push(obj)
                    })
                    // console.log(arr);
                pie(arr);

            },
        })

        function pie(obj) {
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('pie_show'));

            option1 = {
                title: {
                    left: 'center',
                    text: '分类文章数量比',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                grid: {
                    top: '70%',
                },
                legend: {
                    orient: 'horizontal',
                    x: 'center',
                    data: obj.name,
                    top: 30
                },
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [{
                    name: '分类名称',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    // 设置饼图的偏移位置
                    center: ["50%", "58%"],
                    label: {
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: obj,
                    // top: "90%"
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
        }
    </script>
    <!-- 柱状图 -->
    <script>
        $.ajax({
            type: 'get',
            url: '/admin/data/visit',
            data: {},
            success: (backData) => {
                console.log(backData)
                console.log(backData.data)
                let date = [];
                let count = []
                for (let key in backData.data) {
                    date[date.length] = key;
                    count[count.length] = backData.data[key];
                }
                console.log(date, count);
                bie(date, count)
            },
        });

        function bie(date, count) {
            // 基于准备好的dom，初始化echarts实例
            var myChart2 = echarts.init(document.getElementById('column_show'));

            option2 = {
                title: {
                    left: 'center',
                    text: '分类访问量',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    },

                },
                // legend: {
                //     data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
                //     top: 30
                // },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: date
                }],
                yAxis: [{
                    type: 'value'
                }],
                color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
                series: [{
                        type: 'bar',
                        data: count
                    }

                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);
        }
    </script>
</body>

</html>